import React from 'react'
import { NavLink, Routes, Route, Navigate, useRoutes } from 'react-router-dom'
import About from './components/About'
import Home from './components/Home'

// 引入路由表
import routes from './routes'

export default function App() {
  // 直接将路由表的规则写在这里也可，但最好是独立出去
  // const ele = useRoutes([
  //   { path: '/about', element: <About /> },
  //   { path: '/home', element: <Home /> },
  //   { path: '/', element: <navigate to='/about' /> }
  // ])
  const ele = useRoutes(routes)

  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>React Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">

            {/* 原生html中，靠<a>跳转不同的页面 */}
            {/* <a className="list-group-item" href="./about.html">About</a>
							<a className="list-group-item active" href="./home.html">Home</a> */}

            {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
            <NavLink className={({ isActive }) => { return isActive ? 'list-group-item myBgc' : 'list-group-item' }} to="/about">About</NavLink>
            {/* <NavLink className="list-group-item" to="/home" >Home</NavLink> */}
            {/* 自定义active的写法，注意 {isActive} 是解构的，这个对象是可以打印出来的 */}
            <NavLink className={({ isActive }) => { return isActive ? 'list-group-item myBgc' : 'list-group-item' }} to="/home" >Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {ele}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
